<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.4.4.js"></script>
<style>
#big {
	width:512px;
	height:384px;
	float:left;
	border-style:solid;
	border-color:#CCCCCC;
	border-width:6px 3px 6px 6px;
}

#small {
	width:170px;
	height:384px;
	float:left;
}

#small_0 {
	width:170px;
	height:128px;
	border-style:solid;
	border-color:#CCCCCC;
	border-width:3px 3px 0px 3px;
}

#small_1 {
	width:170px;
	height:128px;
	border-style:solid;
	border-color:#CCCCCC;
	border-width:3px 3px 0px 3px;
}

#small_2 {
	width:170px;
	height:128px;
	border-style:solid;
	border-color:#CCCCCC;
	border-width:3px 3px 3px 3px;
}

#ajax {
	width:500px;
	height:100px;
	float:none;
}

</style>
<title>jQuery练习</title>
</head>

<body>
	<div>选择器、事件实例：</div>
	<div id="big"><img id="img_big" src="1.jpg" width="512px" height="384px"/></div>
	<div id="small">
		<div id="small_0"><img id="img_small_0" src="1.jpg" width="170px" height="128px"/></div>
		<div id="small_1"><img id="img_small_1" src="2.jpg" width="170px" height="128px"/></div>
		<div id="small_2"><img id="img_small_2" src="3.jpg" width="170px" height="128px"/></div>
	</div>
	
	<div id="ajax">
		<div>&nbsp;</div>
		<div>
			Ajax 实例：
			<input type="button" value="load方法" id="bt1"/>&nbsp;
			<input type="button" value="get方法" id="bt2"/>&nbsp;
			<input type="button" value="ajax方法" id="bt3"/>&nbsp;
			<input type="button" value="刷新" id="reset"/>
			<p id="txt">这是一段文字。</p>
		</div>
	</div>
	<script>
		$(document).ready(function () {
			$("#small_1").fadeTo(100, 0.5);
			$("#small_2").fadeTo(100, 0.5);
			
			$("#small div").mouseover(function() {
				if (index != $(this).attr("id").substring(6)) {
					$(this).fadeTo(100, 1);
				}
			});
			
			$("#small div").mouseleave(function() {
				if (index != $(this).attr("id").substring(6)) {
					$(this).fadeTo(100, 0.5);
				}
			});
			
			$("#small div").click(function() {
				if (index != $(this).attr("id").substring(6)) {
					$("#small_" + index).fadeTo(100, 0.5);
				}
				clearTimeout(timeout);
				index = $(this).attr("id").substring(6);
				$("#img_big").attr("src", $("#img_small_" + index).attr("src"));
				$(this).fadeTo(100, 1);
				timeout = setTimeout("imgFade()", 2000);
			});
			
			$("#big").mouseover(function() {
				clearTimeout(timeout);
			});
			
			$("#big").mouseleave(function() {
				timeout = setTimeout("imgFade()", 2000);
			});
			
			$("#bt1").click(function() {
				$("#txt").load("test.txt", function() {
					alert("这是load方法的回调函数。");
				});
			});
			
			$("#bt2").click(function() {
				$.get("test.txt", function(data) {
					alert("这是get方法的回调函数,获得数据:" + data);
				});
			});
			
			$("#bt3").click(function() {
				var htmlobj = $.ajax({url:"test.txt", async:true, success:function(data) {
					alert("这是ajax方法的回调函数,获得数据:" + data);
				}}); 
				//htmlobj.responseText
			});
			
			$("#reset").click(function() {
				location.reload();
			});
		});
		
		var index = 0;
		var timeout = -1;
		timeout = setTimeout("imgFade()", 2000);
		
		function imgFade() {
			$("#small_" + index).fadeTo(0, 0.5);
			index = (index + 1) % 3;
			$("#img_big").attr("src", $("#img_small_" + index).attr("src"));
			$("#small_" + index).fadeTo(0, 1);
			timeout = setTimeout("imgFade()", 2000);
		}
	</script>
</body>
</html>
